<template>
  <div>
    <div class="footer">
      <div class="link">
        <div class="link_content">
          <el-row>
            <el-col :span="8">
              <div class="grid-content bg-purple content">
                <img src="../../assets/img/logo_03.png" class="Logo" />
                <div class="slogan">动手做实验,轻松学编程</div>
                <div class="linklogo">
                  <div>
                    <img src="../../assets/img/wechat.png" alt />
                  </div>
                  <div>
                    <img src="../../assets/img/qq.png" alt />
                  </div>
                  <div>
                    <img src="../../assets/img/weibo.png" alt />
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light txtContent">
                <div class="title">公司</div>
                <ul>
                  <li>
                    <a href="#">关于我们</a>
                  </li>
                  <li>
                    <a href="#">联系我们</a>
                  </li>
                  <li>
                    <a href="#">加入我们</a>
                  </li>
                  <li>
                    <a href="#">技术博客</a>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple txtContent">
                <div class="title">合作</div>
                <ul>
                  <li>
                    <a href="#">我要投稿</a>
                  </li>
                  <li>
                    <a href="#">教师合作</a>
                  </li>
                  <li>
                    <a href="#">高校合作</a>
                  </li>
                  <li>
                    <a href="#">友情链接</a>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light txtContent">
                <div class="title">服务</div>
                <ul>
                  <li>
                    <a href="#">实战训练营</a>
                  </li>
                  <li>
                    <a href="#">会员服务</a>
                  </li>
                  <li>
                    <a href="#">实验报告</a>
                  </li>
                  <li>
                    <a href="#">常见问题</a>
                  </li>
                  <li>
                    <a href="#">隐私条款</a>
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple-light txtContent">
                <div class="title">学习路径</div>
                <ul>
                  <li>
                    <a href="#">Python学习路径</a>
                  </li>
                  <li>
                    <a href="#">Linux学习路径</a>
                  </li>
                  <li>
                    <a href="#">大数据学习路径</a>
                  </li>
                  <li>
                    <a href="#">Java学习路径</a>
                  </li>
                  <li>
                    <a href="#">PHP学习路径</a>
                  </li>
                  <li>
                    <a href="#">全部</a>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="copyright">
        <div class="copyright_content">
          <span>Copyright @2013-2016 实验楼在线教育</span>
          <span>|</span>
          <a href="#">蜀ICP备13019762号</a>
          <a href="#">站长统计</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {},
  components: {}
};
</script >

<style scoped>
.footer {
  height: 300px;
}
.link {
  background-color: #191e29;
  height: 240px;
}
.link_content {
  width: 1200px;
  margin: 0 auto;
  color: white;
}
.content {
  height: 150px;
  margin-top: 45px;
}
.slogan {
  color: #00cc99;
  font-size: 20px;
  margin: 0 0 15px 10px;
}
.linklogo {
  display: flex;
}
.linklogo div {
  width: 30px;
  height: 30px;
  background-color: #636469;
  border-radius: 50%;
  margin: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.linklogo div img {
  width: 16px;
  height: 16px;
}
.txtContent {
  height: 150px;
  margin-top: 30px;
}
.txtContent .title {
  color: #8c8f8e;
  font-size: 14px;
  margin-bottom: 10px;
}
.txtContent ul li a {
  color: #8c8f8e;
  font-size: 12px;
  margin-bottom: 3px;
}
.txtContent ul li a:hover {
  color: white;
}
.copyright {
  height: 60px;
  background: #171918;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #777;
}
.copyright a {
    color: #777;
}
.copyright a:hover{
    color: white
}
</style>
